<!--
 * @Description: el-checkbox互斥
 * @Author: your name
 * @Date: 2023-06-30
 * @LastEditTime: 2023-06-30
 * @LastEditors: Please set LastEditors
-->
<template>
  <div class="page">
    <el-form>
      <el-form-item v-for="(item, index) in list" :label="'复选框组' + (index + 1)"  :key="index">
        <el-checkbox-group v-model="item.checked">
          <el-checkbox
            v-for="(jitem, jindex) in item.checkData"
            :label="jitem.label"
            :key="jindex"
            :disabled="setDisabledMuti(jitem, index)"
            >{{ jitem.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
  </el-form>
  </div>
</template>
<script>
export default {
  name: 'DemoThree',
  data() {
    return {
      checkedAll: [],
      list: [
        {
          checked: ['name1'], // 选中值
          checkData: [
            // 复选框
            { label: 'name1', name: '名称1' },
            { label: 'name2', name: '名称2' },
            { label: 'name3', name: '名称3' }
          ]
        },
        {
          checked: ['name4'],
          checkData: [
            { label: 'name1', name: '名称1' },
            { label: 'name4', name: '名称4' },
            { label: 'name3', name: '名称3' }
          ]
        },
        {
          checked: ['name3'],
          checkData: [
            { label: 'name1', name: '名称1' },
            { label: 'name4', name: '名称4' },
            { label: 'name3', name: '名称3' }
          ]
        },
        {
          checked: ['name5'],
          checkData: [
            { label: 'name5', name: '名称5' },
            { label: 'name1', name: '名称1' },
            { label: 'name3', name: '名称3' }
          ]
        }
      ]
    }
  },
  // 计算属性
  computed: {
    setDisabledMuti() {
      return function(opt, index) {
        // 全部已选择
        const tempArr = this.list.map(item => item.checked)
        // 先删除自己的已选
        tempArr.splice(index, 1)
        // 转为一维数组
        const selectedArr = tempArr.flat();
        // 其它的已选，禁用
        return selectedArr.includes(opt.label)
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
